<template>
    <div class="container">
      <el-dialog title="组题预览" :visible.sync="dialogVisible" width="65%" :before-close="Cancel">
        <el-row class="text">
          <el-col :span="6">
            <span v-if="questionItem.questionType === '1'">【题型】:单选题</span>
            <span v-else-if="questionItem.questionType === '2'">【题型】:多选题</span>
            <span v-else>【题型】:简答题</span>
          </el-col>
          <el-col :span="6">
            <span>【编号】:{{ questionItem.id }}</span>
          </el-col>
          <el-col :span="6">
           <span v-if="questionItem.difficulty === '1'">【题型】:简单</span>
           <span v-else-if="questionItem.difficulty === '2'">【题型】:一般</span>
            <span v-else>【题型】:困难</span>
          </el-col>
          <el-col :span="6">
            <span>【标签】: {{ questionItem.tags }}</span>
          </el-col>
        </el-row>
        <el-row class="text">
          <el-col :span="6">
            <span>【学科】:{{ questionItem.subjectName }}</span>
          </el-col>
          <el-col :span="6">
            <span>【目录】:{{ questionItem.directoryName }}</span>
          </el-col>
          <el-col :span="6">
            <span>【方向】:{{ questionItem.direction }}</span>
          </el-col>
        <el-col :span="6"></el-col>
        </el-row>
        <!-- 分割线 -->
         <el-divider/>
        <!-- 题干部分 -->
        <el-row>
          <el-col style="margin-top:30px">
            <span>【题干】:</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col style="color:blue;">
            <div v-html="questionItem.question"></div>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <span>
              <span v-if="questionItem.questionType === '1'">单选题</span>
              <span v-else-if="questionItem.questionType === '2'">多选题</span>
              <span v-else>简答题</span>选项：（以下选中的选项为正确答案）
            </span>
          </el-col>
        </el-row>
      <!-- 单选框 -->
        <el-radio-group v-model="radio" v-if="questionItem.questionType === '1'" >
          <el-row v-for="i in questionItem.options" :key="i.id"  style="margin:10px 0 ">
            <el-col inline>
              <span>{{ i.code }}:     </span>
            <el-radio :label="i.isRight"  @change="change(i)">{{ i.title }}</el-radio>
            </el-col>
          </el-row>
        </el-radio-group>
        <!-- 多选框 -->
        <div v-if="questionItem.questionType === '2'">
          <el-row v-for="(i, index) in options" :key="index" style="margin:10px 0">
            <el-col inline>
              <span style="padding-right:10px">{{ i.code }}:     </span>
            <el-checkbox v-model="i.isRight"  :disabled="i.isRight === '0'" @change="testChang(i)">{{ i.title }}</el-checkbox>
            </el-col>
          </el-row>
        </div>
        <!-- 分割线 -->
         <el-divider/>
        <el-row>
        【参考答案】: <el-button type="danger" size="mini" @click="isVideo">视频答案预览</el-button>
          <el-row style="margin-top:20px" v-if="isVideoShow">
             <video-player  class="video-player vjs-custom-skin"
                   ref="videoPlayer"
                   :playsinline="true"
                   :options="playerOptions"
                   type="video/mp4"
                   />
          </el-row>
        </el-row>
         <el-divider/>
        <el-row class="answer">
          <span>【答案解析】: https://cn.vuejs.org</span>
        </el-row>
        <!-- 分割线 -->
        <el-divider/>
        <el-row class="answer">
          <span>【题目备注】: {{ questionItem.remarks ? questionItem.remarks : '无'}}</span>
        </el-row>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary"  @click="Cancel">关 闭</el-button>
        </span>
      </el-dialog>

    </div>
</template>

<script>

export default {

  data () {
    return {
      radio: 1,
      // 视频是否显示
      isVideoShow: false,
      // 视频播放
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0],
        autoplay: 'muted', // 静音
        loop: false,
        preload: 'auto',
        language: 'zh-CN',
        aspectRatio: '16:9',
        fluid: true,
        sources: [{
          type: 'video/mp4',
          // scr: 'https://vd3.bdstatic.com/mda-me38qw5ayq6m5x6k/sc/cae_h264/1620080580731464743/mda-me38qw5ayq6m5x6k.mp4?'
          src: 'https://vjs.zencdn.net/v/oceans.mp4'
        }],
        poster: '',
        width: document.documentElement.clientWidth,
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true
        }
      }
    }
  },
  props: {
    dialogVisible: { type: Boolean, required: true, default: false },
    questionItem: { type: Object, required: true }
  },

  methods: {
    // 多选框
    testChang (item) {
      if (!item.isRight) {
        item.isRight = false
      }
    },
    // 单选框
    change () {
      this.radio = 1
    },
    // 关闭弹窗
    Cancel () {
      this.$emit('Cancel', false)
      this.isVideoShow = false
    },

    isVideo () {
      this.isVideoShow = true
    }
  },
  computed: {
    options () {
      if (this.questionItem.questionType === '2') {
        if (!this.questionItem.options) {
          return
        }
        this.questionItem.options.forEach(item => {
          if (item.isRight === 1) {
            item.isRight = true
          }
        })
        return this.questionItem.options
      } else {
        return this.questionItem.options
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .container{
    .video{
      width: 400px;
    }
    .answer{
      padding: 8px 0;
    }
    .el-row{
      .el-col{
        font-size: 14px;
        color: #606266;
        line-height:36px;
      }
    }
  }
</style>
